<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>focus-within实现掘金登陆框</title>
</head>
<style>
  .g-wrap {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .g-container {
    position: relative;
    width: 318px;
    margin: 100px auto;
    height: 370px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    z-index: 10;
  }
  .g-container h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .g-container input {
    outline: none;
    padding: 10px;
    width: 100%;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    outline: none;
    box-sizing: border-box;
    font-size: 16px;
  }

  img {
    position: absolute;
    top: -20%;
    left: 50%;
    width: 120px;
    height: 95px;
    transform: translate(-50%, 0);
  }

  .g-username {
    margin-bottom: 10px;
  }
  .g-username img {
    display: none;
    width: 120px;
    height: 113px;
  }

  .g-username:focus-within ~ img {
    display: none;
  }

  .g-username:focus-within input {
    border-color: #007fff;
  }
  .g-username:focus-within img {
    display: block;
  }

  .g-password {
    margin-bottom: 10px;
  }
  .g-password img {
    display: none;
    width: 103px;
    height: 84px;
    top: -15%;
  }

  .g-password:focus-within ~ img {
    display: none;
  }

  .g-password:focus-within input {
    border-color: #007fff;
  }
  .g-password:focus-within img {
    display: block;
  }

</style>
<body>
<ul>
  <li>:focus选中当前获得焦点的元素</li>
  <li>:focus-within选中当前和他所有获得焦点的子元素</li>
</ul>
<div class="g-container">
  <h2>登录</h2>
  <div class="g-username">
    <input name="loginPhoneOrEmail" maxlength="64" placeholder="请输入手机号或邮箱" class="input">
    <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
  </div>

  <div class="g-password">
    <input name="loginPassword" type="password" maxlength="64" placeholder="请输入密码" class="input">
    <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
  </div>

  <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
</div>
</body>
</html>
